<template>
	<view class="content">
		<view class="top"></view>
		<view class="banner">
			<dl>
				<dt>
					<image :src="userInfo.avatarUrl" mode=""></image>
				</dt>
				<dd>{{ userInfo.nickname }}</dd>
			</dl>
			<view class="img">
				<image v-if="qrUrl" :src="qrUrl" mode=""></image>
			</view>
			<view class="sharbuttn">
				<view v-if="qrUrl" class="btn" @click="save">保存二维码</view>
			</view>
			<view class="shartitle">
				<view>分享</view>
			</view>
			<view class="sharapk">
				<view><button open-type="share">
						<image src="../../static/weact.png"></image>
					</button></view>
			</view>
			<view class="bottom">
				<ul>
					<li>1、分享该页给好友，可成为下级代理</li>
					<li>2、分享二维码给好友，可成为下级代理</li>
				</ul>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				qrUrl: ''
			}
		},
		onLoad() {
			uni.showLoading({
				title: '正在获取'
			})
			this.$api.request('distribution', 'getSubQRCode', {

			}, failres => {
				uni.hideLoading()
				this.$api.msg(failres.errmsg)
			}).then(res => {
				uni.hideLoading()
				this.qrUrl = res.data
			})
		},
		onShareAppMessage() {
			return {
				title: '秋歌体验田-微信小程序',
				imageUrl: 'https://unimall-asset.oss-cn-beijing.aliyuncs.com/share-jsy.png',
				path: '/pages/distribution/create?distribution=' + this.userInfo.distributionId
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			//保存图片到相册
			save() {
				const that = this
				uni.downloadFile({
					url: this.qrUrl,
					success(e) {
						if (e.statusCode === 200) {
							console.log();
							uni.saveImageToPhotosAlbum({
								filePath: e.tempFilePath,
								success() {
									that.$api.msg('保存成功')
								},
								fail(e) {
									console.log(e)
									that.$api.msg('保存失败')
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 230upx;
		background-size: 100%;
		background-position: center center;
	}

	.tugurl {
		color: #999;
	}

	.sharbuttn {
		display: flex;
		justify-content: center;
	}

	.shartitle {
		width: 80%;
		text-align: center;
		margin-left: 10%;
		border-bottom: 1px solid #dddddd;
		position: relative;
		height: 60upx;
	}

	.tgtit {
		text-align: center;
	}

	.shartitle view {
		height: 50upx;
		line-height: 50upx;
		font-size: 28upx;
		color: #999;
		width: 120upx;
		margin: 32upx auto;
		position: absolute;
		background: #fff;
		left: 50%;
		margin-left: -60upx;
	}

	.sharapk {
		display: flex;
		justify-content: center;
		margin: 20upx auto
	}

	.sharapk view {
		margin: 40upx;
	}

	.sharapk view image {
		height: 80upx;
		width: 80upx;
	}

	.content {
		width: 100%;
		background-color: #ffffff;
	}

	.banner {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 60upx 60upx 0 0;
		margin-top: -60upx;
	}

	.banner dl {
		margin-top: -80upx;
	}

	.banner dl dt {
		text-align: center;
	}

	.banner dl dt image {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
	}

	.banner dl dd {
		text-align: center;
	}

	.img {
		width: 300upx;
		height: 300upx;
		background-color: white;
		margin: 0 auto;
		margin-top: 60upx;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.btn {
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}

	.bottom {
		width: 100%;
		height: 400upx;
		/* 	background: url(../../static/img/beij.png) no-repeat; */
		background-position: left bottom;
		/* 设置背景图片位置 */
		background-size: 20%;
	}

	.bottom ul {
		padding-left: 40upx;
		box-sizing: border-box;
	}

	.bottom ul li {
		width: 100%;
		height: 60upx;
	}

	button::after {
		border: none;
		background: #FFFFFF;
	}
</style>
